import React, { Component } from 'react'
import { connect } from 'dva';

import { Table, Drawer } from 'antd';
import Form from './components/SearchForm';
import Record from './record';
import { checkInit } from '@/utils/util';

export interface Props {
  dispatch?: Function,
  children?: React.ReactNode,
  loading: boolean,
  list: {
    data: Array<any>,
    dataCnt: number
  },
  buttons?: Array<any>,
  dict?: object
}

const ONE_PAGE_SIZE = 10;

@connect(({ device_alarm_other, loading, menu }) => ({
  list: device_alarm_other.list || {},
  dict: device_alarm_other.dict,
  buttons: menu.buttons,
  loading: loading.effects['device_alarm_other/queryPage']
}))
class Build extends Component<Props, any> {
  constructor(props) {
    super(props);
    this.initCurrent = this.initCurrent.bind(this);
  }
  state = {
    current: 1,
    showRecord: false,
    ownerName: '',
  };

  queryData(offset = 1, size = ONE_PAGE_SIZE) {
    const { dispatch } = this.props;
    dispatch({
      type: 'device_alarm_other/queryPage',
      payload: {
        pageNum: offset,
        pageSize: size,
        rawType: '9',
      },
    });
  }

  initCurrent() {
    this.setState({
      current: 1
    })
  }

  componentDidMount() {
    const { dispatch } = this.props;
    checkInit() ? dispatch({ type: 'device_alarm_other/initCond' }) : this.queryData();
  }

  render() {
    const { buttons } = this.props;
    const btnList = {};
    if (Array.isArray(buttons)) {
      buttons.forEach(item => {
        btnList[item.name] = item.name
      });
    }
    const { data = [], dataCnt } = this.props.list;
    const ans = data && Array.isArray(data) ? data.map((item, index) => ({
      key: index,
      id: item.id, // 主键编号
      status: item.statusName,  // 报警状态
      typeName: item.typeName, // 报警类型
      stateName: item.stateName,
      createTime: item.createTime || '', // 报警时间
      deviceName: item.deviceName,  // 设备名称
      deviceLocation: item.deviceLocation && item.deviceLocation !== '--' ? item.deviceLocation : item.installationAddrName ? item.installationAddrName : '',  // 设备地址
      deviceType: item.deviceTypeName,  // 设备类型
      deviceState: item.deviceStateName  // 设备状态
    })
    ) : [];
    const pagination = {
      total: dataCnt,
      showTotal: total => `共 ${total} 条`,
      showQuickJumper: true,
      pageSize: ONE_PAGE_SIZE,
      onChange: (current) => {
        this.setState({ current });
        this.queryData(current)
      },
    };
    const columns = [{
      title: '设备名称',
      dataIndex: 'deviceName',
    }, {
      title: '设备类型',
      dataIndex: 'deviceType',
    }, {
      title: '设备状态',
      dataIndex: 'deviceState',
    }, {
      title: '安装位置',
      dataIndex: 'deviceLocation',
    }, {
      title: '报警明细类型',
      dataIndex: 'stateName',
    }, {
      title: '报警状态',
      dataIndex: 'status',
    }, {
      title: '报警时间',
      dataIndex: 'createTime',
    }, {
      title: '处理方式',
      dataIndex: 'handleType',
    }, {
      title: '处理人',
      dataIndex: 'handler',
    }, {
      title: '处理时间',
      dataIndex: 'handleTime',
    }, {
      title: '操作', key: 'x', render: (record, text, index) => {
        return (
          <div style={{ display: 'flex' }}>
            <a onClick={() => this.setState({ showRecord: true, ownerName: record.deviceName })}>历史报警</a>
          </div>
        )
      }
    }];
    return (
      <div>
        <Form current={this.state.current} initCurrent={this.initCurrent} new={!!btnList['新增']} />
        <Table
          columns={columns}
          pagination={pagination}
          dataSource={ans}
          bordered
          loading={this.props.loading}
        />
        <Drawer
          title="历史报警"
          placement="right"
          onClose={() => this.setState({ showRecord: false })}
          visible={this.state.showRecord}
          width={1000}
          destroyOnClose={true}
          bodyStyle={{ height: 'calc(100% - 91px)' }}
        >
          <h3 style={{ color: '#444', marginLeft: '20px' }}>{this.state.ownerName}</h3>
          <section style={{ height: '100%', overflow: 'auto', padding: '0px 20px' }}>
            <Record />
          </section>
        </Drawer>
      </div>
    );
  }
}

export default Build;
